<%--
    Copyright 2010 mazhao.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
    under the License.
  Created by IntelliJ IDEA.
  User: mazhao
  Date: 2010/11/01
  Time: 23:10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>order page</title>
    
    <script type="text/javascript">
        DEBUG = true;

        $(document).ready(function() {
            $.log("before date picker");
            $("#dateFrom").datepicker( { dateFormat: 'yy/mm/dd' } );
            $("#dateTo"  ).datepicker( { dateFormat: 'yy/mm/dd' } );
            $.log("after  date picker");

            $("table#orderTable tbody tr").mousedown(function() {
                $("tr.selected").removeClass("selected");
                $(this).addClass("selected");
                var orderId = $(this).children(":nth-child(1)").text();
                $.log("begin load order items, order is " + orderId)
                loadOrderItems(orderId);
            });
        });

        function loadOrderItems( orderId ){
            $.log("begin load order items function")
            $.post("<%= request.getContextPath()%>/management/onthefly/listorderitems.action",
                    {"orderId": orderId},
                    loadOrderItemsImpl,
                    "json");
        }

        function loadOrderItemsImpl( data ) {
            // 1. load order items area
            $.log("begin load order item impl function.")
            $("table tbody#orderItemTbody").remove();
            var strTbody = "<tbody id='orderItemTbody'>";
            for (var i = 0; i < data.items.length; i++) {
                strTbody += "<tr>";
                strTbody += "<td>" + data.items[i].id + "</td>";
                strTbody += "<td>" + data.items[i].catalog + "</td>";
                strTbody += "<td>" + data.items[i].name + "</td>";
                strTbody += "<td>" + data.items[i].specialPrice + "</td>";
                strTbody += "<td>" + data.items[i].count + "</td>";
                strTbody += "</tr>";
            }
            strTbody += "</tbody>";

            $("table#orderItemTable").append(strTbody);
        }

        function changeStatus(orderId, from, to) {
            $.log("begin chagne status for " + orderId + " from " + from + " to " + to )
            $.post("<%= request.getContextPath()%>/management/onthefly/changestatus.action",
                    {"orderId": orderId, "formerStatus": from, "status": to},
                    changeStatusSuccess,
                    "json");
            $.log("change status success");
        }
        function changeStatusSuccess(data) {
            $.log("status chaged successfully, refresh form now.");
            $("form#queryForm").submit();
        }

    </script>
</head>
<body>
<h2>This is order page</h2>

<div style="width: 768px">
   Order Filter:<br/>
   <s:form action="orderlist" namespace="/management" id="queryForm" cssClass="append-4 alt" cssStyle="margin-left:0px;">
       <s:select list="%{  orderStatus.entrySet().iterator() }" 
                 listKey="key" listValue="value"
                 name="status" label="Status"/>
       <s:textfield name="from" id="dateFrom" maxLength="10" size="11" label="From"/>
       <s:textfield name="to"   id="dateTo"   maxLength="10" size="11" label="To"/>
       <s:submit />
   </s:form>
   <a href="#">Export Today Changed</a>
</div>
<br/>
<div style="width: 768px;">
   Order List:<br/>
    <table id="orderTable" class="display">
        <thead>
        <tr>
            <td>ID</td>
            <td>Post Code</td>
            <td>Province</td>
            <td>City</td>
            <td>Address</td>
            <td>Name</td>
            <td>Phone</td>
            <td>Cell Phone</td>
            <td>E-Mail</td>
            <td>Create Time</td>
            <td>Status</td>
        </tr>
        </thead>
        <tbody>
        <s:iterator value="orders" var="order">
            <tr>
                <td><s:property value="id"/></td>
                <td><s:property value="postCode"/></td>
                <td><s:property value="province"/></td>
                <td><s:property value="city"/></td>
                <td><s:property value="address"/></td>
                <td><s:property value="name"/></td>
                <td><s:property value="phone"/></td>
                <td><s:property value="cellPhone"/></td>
                <td><s:property value="email"/></td>
                <td><s:property value="createTime"/></td>
                <td>
                    <s:if test="status == 10">
                        New
                        <button class="alt" onclick="changeStatus(<s:property value="id"/>, 10, 20)">New→Sent</button>
                        <button class="alt" onclick="changeStatus(<s:property value="id"/>, 10, 40)">New→Pending</button>
                    </s:if>
                    <s:elseif test="status == 20">Sent</s:elseif>
                    <s:elseif test="status == 30">
                        Finished
                    </s:elseif>
                    <s:elseif test="status == 40">
                        Pending
                        <button class="alt" onclick="changeStatus(<s:property value="id"/>, 40, 20)">Pending→Sent</button>
                    </s:elseif>
                    <s:elseif test="status == 50">Canceled</s:elseif>
                    <s:else>ERROR:<s:property value="status"/></s:else>
                </td>
            </tr>
        </s:iterator>
        </tbody>
    </table>
</div>
<br/>
<div  style="width: 768px">
    Order Item List:<br/>
<table id="orderItemTable" style="border: solid #BDD2FF;" align="left">
    <thead style="background: #BDD2FF">
    <tr>
        <td>ID</td>
        <td>Catalog</td>
        <td>Name</td>
        <td>Special Price</td>
        <td>Count</td>
    </tr>
    </thead>

</table>
</div>
<br/>
<div  style="width: 768px" id="operationDiv">

</div>

</body>
</html>